<template>
  <div>
    <div class="table-center-week">
      <!--      <div class="right-bor-one">-->
      <!--        <p>MON</p>-->
      <!--        <section class="section-title">-->
      <!--          <section>1</section>-->
      <!--          <section>2</section>-->
      <!--          <section>3</section>-->
      <!--        </section>-->
      <!--      </div>-->
      <!--      <div class="right-bor">-->
      <!--        <p>TUE</p>-->
      <!--        <section class="section-title">-->
      <!--          <section>1</section>-->
      <!--          <section>2</section>-->
      <!--          <section>3</section>-->
      <!--        </section>-->
      <!--      </div>-->
      <!--      <div class="right-bor">-->
      <!--        <p>WED</p>-->
      <!--        <section class="section-title">-->
      <!--          <section>1</section>-->
      <!--          <section>2</section>-->
      <!--          <section>3</section>-->
      <!--        </section>-->
      <!--      </div>-->
      <!--      <div class="right-bor">-->
      <!--        <p>THU</p>-->
      <!--        <section class="section-title">-->
      <!--          <section>1</section>-->
      <!--          <section>2</section>-->
      <!--          <section>3</section>-->
      <!--        </section>-->
      <!--      </div>-->
      <!--      <div class="right-bor">-->
      <!--        <p>FRI</p>-->
      <!--        <section class="section-title">-->
      <!--          <section>1</section>-->
      <!--          <section>2</section>-->
      <!--          <section>3</section>-->
      <!--        </section>-->
      <!--      </div>-->
      <!--      <div class="right-bor">-->
      <!--        <p>SAT</p>-->
      <!--        <section class="section-title">-->
      <!--          <section>1</section>-->
      <!--          <section>2</section>-->
      <!--          <section>3</section>-->
      <!--        </section>-->
      <!--      </div>-->
      <!--      <div>-->
      <!--        <p>SUN</p>-->
      <!--        <section class="section-title">-->
      <!--          <section>1</section>-->
      <!--          <section>2</section>-->
      <!--          <section>3</section>-->
      <!--        </section>-->
      <!--      </div>-->
      <div v-for="(item,index) in list" :key="index"
           :class="index === 0 ? 'right-bor-one' : (index === 6 ? '' : 'right-bor')">
        <p>{{item.week}}</p>
        <section class="section-title">
          <section v-for="(items,indexs) in item.data" :key="indexs">{{items}}</section>
        </section>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "weekTitle",
    data() {
      return {
        list: [{
          week: "MON",
          data: [1, 2, 3]
        }, {
          week: "TUE",
          data: [1, 2, 3]
        }, {
          week: "WED",
          data: [1, 2, 3]
        }, {
          week: "THU",
          data: [1, 2, 3]
        }, {
          week: "FRI",
          data: [1, 2, 3]
        }, {
          week: "SAT",
          data: [1, 2, 3]
        }, {
          week: "SUN",
          data: [1, 2, 3]
        }]
      }
    }
  }
</script>

<style scoped>
  .table-center-week {
    display: flex;
    width: 100%;
  }

  .table-center-week div {
    flex: 1;
    color: #fff;
    background-color: #325194;
    height: 30px;
    font-size: 12px;
    text-align: center;
  }

  .section-title {
    display: flex;
  }

  .section-title section {
    flex: 1;
  }

  .right-bor-one {
    border-top-left-radius: 5px;
    border-right: 1px solid #cecece;
  }

  .right-bor {
    border-right: 1px solid #cecece;
  }
</style>
